<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时日志管理</title>
    <link rel="stylesheet" href="/static/log_manager.css">
</head>
<body>
    <div class="container">
        <h1>实时日志管理系统</h1>

        <!-- 统计信息 -->
        <div class="stats-container">
            <div class="stat-card debug">
                <div class="stat-label">DEBUG</div>
                <div class="stat-number" id="debug-count">0</div>
            </div>
            <div class="stat-card info">
                <div class="stat-label">INFO</div>
                <div class="stat-number" id="info-count">0</div>
            </div>
            <div class="stat-card warning">
                <div class="stat-label">WARNING</div>
                <div class="stat-number" id="warning-count">0</div>
            </div>
            <div class="stat-card error">
                <div class="stat-label">ERROR</div>
                <div class="stat-number" id="error-count">0</div>
            </div>
            <div class="stat-card critical">
                <div class="stat-label">CRITICAL</div>
                <div class="stat-number" id="critical-count">0</div>
            </div>
        </div>

        <!-- 控制按钮 -->
        <div class="controls">
            <button onclick="refreshStats()">刷新统计</button>
            <button class="reset" onclick="resetStats()">重置统计</button>
            <button onclick="loadLoggers()">刷新Logger列表</button>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="logger-search" placeholder="搜索Logger名称..." onkeyup="filterLoggers()">
        </div>

        <!-- Logger列表 -->
        <div class="logger-list" id="logger-list">
            <!-- Logger项目将通过JavaScript动态加载 -->
        </div>
    </div>

    <!-- 添加处理器的模态框 -->
    <div id="handler-modal" class="modal hidden">
        <div class="modal-content">
            <span class="close" onclick="closeHandlerModal()">&times;</span>
            <h2>添加处理器</h2>
            <form id="handler-form">
                <input type="hidden" id="handler-logger-name">
                <div class="form-group">
                    <label for="handler-type">处理器类型:</label>
                    <select id="handler-type">
                        <option value="file">文件处理器</option>
                        <option value="stream">流处理器</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="handler-level">日志级别:</label>
                    <select id="handler-level">
                        <option value="DEBUG">DEBUG</option>
                        <option value="INFO" selected>INFO</option>
                        <option value="WARNING">WARNING</option>
                        <option value="ERROR">ERROR</option>
                        <option value="CRITICAL">CRITICAL</option>
                    </select>
                </div>
                <div class="form-group file-options">
                    <label for="handler-filename">文件名:</label>
                    <input type="text" id="handler-filename" value="../logs/custom.log">
                </div>
                <div class="form-group file-options">
                    <label for="handler-max-bytes">最大字节数:</label>
                    <input type="number" id="handler-max-bytes" value="10485760">
                </div>
                <div class="form-group file-options">
                    <label for="handler-backup-count">备份数量:</label>
                    <input type="number" id="handler-backup-count" value="5">
                </div>
                <div class="form-group">
                    <label for="handler-format">格式:</label>
                    <input type="text" id="handler-format" value="%(asctime)s - %(levelname)s - [%(name)s] - %(filename)s:%(lineno)d - %(message)s">
                </div>
                <div class="form-group">
                    <label for="handler-propagate">是否向上传播:</label>
                    <select id="handler-propagate">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
                <button type="submit">添加处理器</button>
            </form>
        </div>
    </div>

    <script src="/static/log_manager.js"></script>
</body>
</html>
